<template>
  <h2>watch页面</h2>
  <h2>一、ref绑定响应式数据</h2>
  <h3>1.ref绑定基本数据类型</h3>
  <h3>{{ num }}</h3>
  <button @click="fn2">点击修改</button>

  <h3>2.ref绑定复杂数据类型</h3>
  <h3>{{ obj }}</h3>
  <button @click="fn3">点击修改</button>

  <button @click="stopWatch">停止监听</button>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch, watchEffect } from "vue";

// 1.ref绑定基本数据类型
let num = ref(18);
function fn2() {
  num.value++;
  console.log(num);
}
console.log(num);

//   watch(num, () => {
//     console.log("num改变了");
//   });

// 2.ref绑定复杂数据类型

let obj = reactive({
  name: "小米",
  age: 19,
});

console.log(obj);
function fn3() {
  obj.name = "小王";
  // obj.value={
  //     name:"张三",
  //     age:17
  // }
}
//   watch(
//     obj,
//     () => {
//       console.log("obj改变了");
//     },
//     { deep: true }
//   );

// watch(
//   [num, obj],
//   () => {
//     console.log("改变了~~~~~");
//   },
//   {
//     deep: true,
//     immediate: true, //立即执行
//   }
// );

// watch(
//   () => obj.value.name,//监听对象中某个属性值的改变，需要用箭头函数
//   () => {
//     console.log("name改变了");
//   }
// );

// let stopWatch=watchEffect((onCleanup)=>{
//   let num2=num.value;
//   console.log("num2",num2);
//   // let obj2=obj.name;
//   // console.log("obj2",obj2);

//   let stop=setInterval(()=>{
//     console.log("计时器");
//   },2000);

//   onCleanup(()=>{
//     clearInterval(stop);
//     console.log("清除！");
//   })
// })
</script>

<style scoped></style>
